CSS

Basicos:

1. Estructura.

selector{
            propiedad: valor;
            }

2. Selectores.

<h1>Mi primer titulo editado en CSS</h1>
        <h2 class="titulo-h2">Mi primer h2 con CSS</h2>
        <h2 id="id-h2">Otro titulo h2</h2>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing </p>
        <div>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing </p>
        </div>

/* Selector Universal */
        * {
            color: blue;
        }

        /* Selector de tipo (h1, parrafos, botones, inputs, etc */

        h1 {
            color: red;
        }
        p {
            color:aqua;
        }
        /* Selector por clases */
        .titulo-h2{
            color:bisque;
        }
        /* Selector por ID */
        #id-h2{
            background-color: red;
        }
        /* Selector por atributo, en este caso el atributo es creado */
        [rancio="siRancio"]{
            color: white;
            background-color: blue;
        }
        /* Por descendiente*/ 
        /* en este ejemplo seleccionamos a los elementos
        p que estan dentro de un div */
        div p{
            color:brown;
        }
        /*en este ejemplo seleccionamos a los p que estan dentro de un div
        pero son de la clase=parrafoEspecial
        Nota: para las clases se pone el elemento que contien a la clase y luego 
        la clase, o simplemente la clase*/
        div p.parrafoEspecial{ 
            color:black;
        }
        /* Selector por pseudoClases, como active, hover. Eventos de las selecciones */
        p:hover{
            background-color:red;
            color: black;
        }   

3. Especificidad.

• La especificidad es la manera mediante la cual los navegadores deciden qué valores de una propiedad CSS son más relevantes para un elemento y, por lo tanto, serán aplicados. La especificidad está basada en las reglas de coincidencia que están compuestas por diferentes tipos de selectores CSS.más info. El orden de mayor a menor importancia:

  1. !Importat
  2. Estilo en linea.
  3. Identificadores.
  4. Clases, pseudo-clases y los atributos.

  5. elementos y los pseudo-elementos.
     Nota: los pseudo elementos se reconocen porque van precedidos de dos(2) :: y las pseudo-clases solo de uno (1) :

     /* Ejemplo de como usar el !important  */
             .titulo-h2{
             color: black;
             background-color:red;
             }
             h2 {
             color:yellow;
             background-color:aqua !important;
             }
             /* El estilo de clase tiene mayor rango     que la de
             elemento, pero al usar el !important,   el estilo que
             domina es este. */

4. Metodología BEM.

Modificador de Bloques de Elementos (del ingles Block Element Modifier BEM).BEM es una metodología que usaremos para nombrar y clasificar selectores CSS de manera estricta, transparente e informativa. más info

5. Unidades.

Más informacion en mozilla developer: más info

• Fijas o absolutas: No son relativas a nada más, generalmente son del mismo tamaño:
  

• Relativas.
  

1 em por defecto es 16px

6. Propiedades de Texto.

.contact-form__h1 {
            /* aqui 1 em es de 20px que es
            el tamaño que viene de la caja contenedora */

            /* tamaño */
            font-size: 2em;
            /* Tipo de letras */
            font-family: Georgia;
            /* Lo que ocupa la caja que contiene la letra, a lo alto */
            line-height: 1.5;
            /* El grosor de cada letra */
            font-weight: 400;
            
        }

Para más detalle u otras opciones en más info

7. Tipografías externas.

Para incluir tipografia diferentes se puede usar las de google. En la cabecera del HTML se incluye la tipografia y en CSS se llama a la seleccionada.

<link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Redressed&display=swap" rel="stylesheet">

font-family: 'Redressed', cursive;

8. Normalize.

• Se utiliza el normalize para unificar todos los navegadores, entre ellos existen diferencias en el padding y otras propiedades. aqui descarga el archivo normalize.
  

9. Cajas.

• Bloques: Siempre se ajustan al tamaño, a lo ancho, de la caja que la contiene.
• Linea: Se ajustan al tamaño del contenido del elemento.
  

Nota: Utilizando la propiedad display se utiliza para cambiar el comportamiento, por ejemplo:

h2 {
            display: inline;
            height: 400px; /* A los elementos en linea no se aplica height */

10. Padding.

Es la distancia entre el texto y el borde de la caja, es una propiedad resumida, es decir, puedo resumir:

   padding: 10px 20px 30px 40px;
          /* top=10px derecha=20px 
            abajo= 30px e izquierda= 40px */

11. Widht y Height.

• El ancho y largo de las cajas.
  

12. Box Sizing.

• box-sizing: content-box;
  Aqui el tamaño de la caja se ve afectado por el padding, margin y border.

  h3 {
              background-color:red;
              display:inline-block; /* Inline, pero acepta las propiedades block */
              padding: 10px 50px;
              height:100px;
              width:100px;
              box-sizing:content-box;
              /* aqui el ancho de la caja son 100px del widht + 50px de padding 
              derecha + 50px padding izquierda => total de 200px*/
          }

• box-sizing: border-box;
  Del ejemplo anterio si utilizamos la opcion de border-box, la caja va a mantener el valor del width y no le suma los padding.

13. Margin.

• Es la distancia entre las cajas, es el borde exterior.

14. Bordes.

Más información aqui

15. Box Model.

16. Sombras.

• Box-shadow: más info
  

/* Sintaxis:
        /* Keyword values */
        box-shadow: none;

        /* offset-x | offset-y | color */
        box-shadow: 60px -16px teal;

        /* offset-x | offset-y | blur-radius | color */
        box-shadow: 10px 5px 5px black;

        /* offset-x | offset-y | blur-radius | spread-radius | color */
        box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

        /* inset | offset-x | offset-y | color */
        box-shadow: inset 5em 1em gold;

        /* Any number of shadows, separated by commas */
        box-shadow: 3px 3px red, -1em 0 0.4em olive;

        /* Global keywords */
        box-shadow: inherit;
        box-shadow: initial;
        box-shadow: unset;

• text-shadow: más info

17. Outline.

Es igual que el border, pero no es real, no ocupa espacio en el DOM. Es un shorthand, aqui más info.

/* style */
        outline: solid;

        /* color | style */
        outline: #f66 dashed;

        /* style | width */
        outline: inset thick;

        /* color | style | width */
        outline: green solid 3px;

18. Position.

Se utiliza para posicionar objetos en el DOM, y al posicionar el objeto adquiere cuatro (4) propiedades: Top, Right, left, botton y el Z-Index. más info

19. Position Static.

Es el valor por defecto y se considera que no esta posicionada.

20. Position Relative.

Se posiciona pero conserva su espacio en el DOM. Nota: Las propiedades TOP y LEFT son las más importantes y dominan a las otras dos (2)

21. Z Index.

Ordena los elementos en el eje Z, que es el eje de profundidad de la pantalla. A mayor el número mas adelante se muestra.

Nota: La recomendación es colocar los Z-Index es de 50 en 50 para poder ajustar elementos en medio, es decir, dar espacio para ajustar luego de crearlos.

Conflicto de hijos y padres del Z-Index:

La unica forma del que el hijo este abajo del padre, es que tenga z-index:-1 y el padre no tener z-index.

.contenedor{
            width:300px;
            height:300px;
            background:blue;
            margin: 80px;
            position: relative; 
        }
        .hijo {
            background:orange;
            width:120px;
            height:120px;
            position: relative;
            top: -20px;
            left: -20px;
            z-index: -1;
        }

21. Position Absolute.

Con el position absolute no reserva el espacio y el punto de referencia que se mueve es el contenedor o el viewport...En el relative, era desde su posicion inicial.

Nota: Al tener el absolute, el tamaño de la caja se ajusta al contenido, aunque el elemento sea block.

Toma de referencia el view port, a menos que el contenedor este posicionado y ahi, si se puede hacer referencia absoluta respecto al contenedor.

22. Position Fixed.

Igual que el absolute, pero se queda fijado. Utilizado para la publicidad, que queda fija pero lo demas cambia.

23. Position Sticky.

Es una mezcla entre relative y el fixed. Se reserva el espacio en el DOM y se define en que momento va ha estar fijo

CSS Intermedio:

25. Display.Para ir al inicio volver

• Block.
• Inline.
• InlineBlock.
• Flex.
• Grid.
• InlineFlex.
• InlineGrid.
  

26. Overflow.

Cuando un texto sobrepasa al contenedor, el overflow es la propiedad para tratar estos casos.

Esta propiedad es un shorthand, para más info de los valores, ejemplos y propiedades CSS relacionadas.

27. Float.

Es una propiedad de CSS que ubica un elemento al lado izquierdo o derecho de su contenedor, permitiendo a los elementos de texto y en linea aparecer a su costado. El elemento es removido del normal flujo de la pagina, aunque aún sigue siendo parte del flujo.

En la actualidad se utiliza para colocar texto de envuelva a la imagen, utilizado para articulos y blogs, para más info

28. Pseudoelementos.

Son elementos que no forman parre del DOM, pero si se ven los resultados, igual que el outline. Para más info y son elementos inline:

• ::first-line.
• ::first-letter.
• ::placeholder.
• ::selctor.
• ::after.(Hijos y necesitan content y son inline)
• ::before.(Hijos y necesitan content y son inline)

NOTA: Los pseudo-elementos que tienen la propiedad content no forman parte del DOM, como por ejemplo ::after y ::before, entonces no pueden ser seleccionadas.

29. Pseudoclases.

Una pseudoclase CSS es una palabra clave que se añade a los selectores y que especifica un estado especial del elemento seleccionado. Por ejemplo, :hover aplicará un estilo cuando el usuario haga hover sobre el elemento especificado por el selector. Para más info y algunas pseudo-clases son:
* :hover.
* :link. Cambia las propiedades de un link que no hemos visitado. * :visited. Cambia las propiedades de un link que ya hemos visitado. * :lang()

30. Objet Fit.

La propiedad object-fit indoca como el contenido de un elemento externo, por ejemplo una imagen o un video, deberia redimensionarse para ajustarse a su contenedor...más info de los posibles valores:
* Contain.
* Cover.
* Fill.
* one.
* Scale-down.

31. Objet Position.

La propiedad object-position determina el alineamiento del elemento dentro de la caja., este es un valor de cuatro que representa una posición en 2D con respecto a los bordes de la caja.

/* left - Right - Top - Button */
        object-position: 10px;

        /* Puede ser px - em - % - etc */

32. Cursor.

La propiedad CSS:cursor especifica el tipo de cursor que se mostrara cuando este se encuentre sobre un elemento. Para ver los posibles valores más info.

33. Colorización (ColorName,Hex, RGB/A).

Hay varias formas de indicar los colores:
* Por el nombre. El navegador interpreta el color y coloca el color, pero hay diferencias entre navegadores. * RGB (Red-Rojo, Green-Verde, Blue-Azul). Las medidas van del cero(0) al 255, cero(0) es nada y 255 lo maximo.

/* Negro */
        background: rgb(0,0,0);
        /* Blanco */
        background: rgb(255,255,255);
        /* Rojo + Verde  = Amarillo una excepsion */
        background: rgb(255,255,0);
        

• RGBA. Es una variacion de RGB y el A es alfa o % de opacidad.
  

/* Negro */
        background: rgb(0,0,0,.2);
        /* Blanco */
        background: rgb(255,255,255,.3);
        /* Rojo + Verde  = Amarillo una excepsion */
        background: rgb(255,255,0,.5);
        

• Hexadecimal. Es la misma base que el RGB pero son en base a 16, es decir, del cero(0) al f.
  

Puede estar en base a 3 digitos, por ejemplo: #000 seria el minimo o negro y #fff seria el blanco.
Puede estar en base a 6 digitos, por ejmplo: #000000 seria negro y #ffffff blanco y #ff0000 rojo puro.

34. Conceptos Básicos de Responsive.

Es adaptar la paguina a diferentes resoluciones, lo recomendado es hacer las paguinas Firts Mobile, es decir, diseñar primero para moviles y luego para mayores tamaños.

35. Menu Responsive.

36. Introducción a Flexbox.

El Módulo de Caja Flexible, comúnmente llamado flexbox, fue diseñado como un modelo unidimensional de layout, y como un método que pueda ayudar a distribuir el espacio entre los ítems de una interfaz y mejorar las capacidades de alineación

37. Conceptos de Flexbox.

El flexbox tiene dos ejes:

1. Main Axis (Eje Principal). Esta controlado por la propiedad flex-direction.
   
2. Cross Axis(Eje Cruzado). Va perpendicular al main axis.

38. Display Flex.

El contenedor flex: Un área del documento que contiene un flexbox es llamada contendedor flex. Para crear un contenedor flex, establecemos la propiedad del área del contenedor display como flex o inline-flex. Tan pronto como hacemos esto, los hijos directos de este contenedor se vuelven ítems flex. Las propiedades del contenedor flex son:
* flex-direction.
* flex-wrap.
* flex-flow. Es un shorthand de flex-direction y flex-wrap.

39. Flex direction.

La propiedad CSS flex-direction especifica cómo colocar los objetos flexibles en el contenedor flexible definiendo el eje principal y la dirección (normal o al revés). Valores:
* row. Valor por defecto y muestra los elementos en fila, comenzando de izquierda a derecha.
* row-reverse. Muestra los elementos en fila, pero empezando de derecha a izquierda.
* column. Muestra los elementos en columna de arriba hacia abajo.
* column-recerse. La dirección es de abajo hacia arriba.

40. Flex wrap.

La propiedad flex-wrap de CSS especifica si los elementos "hijos" son obligados a permanecer en una misma línea o pueden fluir en varias líneas. Si la cobertura (wrap) está permitida, esta propiedad también te permite controlar la dirección en la cual serán apilados los elementos. Valores:
* nowrap. Valor por defecto.
* wrap.
* wrap-reverse.

Nota: Si le doy un widht:100%, los elementos se comportan como bloque.
Nota: Utlizando la propiedad min-width controlo el ancho minimo del contenedor.

41. Alineación en Flex.

Los flex-box tienen propiedades que controlan la alineación de las cajas y sus contenidos, y estas son:

• justify-content. Controla la alineación de todos los elementos en el eje principal.. Valores:

  • flex-start:
    
  • flex-end:
    
  • center:
    
  • space-between:
    
  • space-around: Deja el mayor espacio posible.
    
  • space-evenly: Deja el mismo espacio entre las cajas y el contenedor.
    

• align-items. Controla la alineación de todos los elementos en el eje transversal. Posibles valores:

  • Normal.
  • flex-start.
  • flex-end.
  • center.
  • start.
  • end.
  • baseline.
  • stretch. Valor por defecto.
    

• align-content. Descrito en la especificación como para "empaquetar líneas flexibles"; Controla el espacio entre las líneas de flexión en el eje transversal.

La propiedad flex es un shorthand y son propiedades de los item flexibles. Hasta ahora hemos visto las propiedades del contenedor: más info

• align-self. Controla la alineación de un elemento flexible individual en el eje transversal.
  
• flex-grow.
  
• flex-shrink.
  
• flex-basis.

42. Flow Grow.

Reparte el espacio que sobra del contenedor y los reparte entre los los flex items si se lo asignamos a todos los item o podemos asignarle esta propiedad a un solo elemento.

43. Flex Basis.

Es como la propiedad width, pero es más importante, le da prioridad al flex-basis.

44. FLex Shrink.

La propiedad CSS flex-shrink especifica el factor de contracción de un flex item.

45. Order.

Es como el Z-index, pero en el eje que apunta el main axis.

46. Formulario con Flex.

Lucas hace una practica de crear un formulario utilizando flex-box. En esta guía, más Info , se muestran algunos de los casos de uso comunes de flexbox, en aquellos lugares donde tiene más sentido que otro método de diseño.

47. Conceptos de Grid.

48. Display Grid.

49. Grid Templates.

50. Medidas especiales de Grid.

51. Grid Gap.

52. Asignación de espacios.

53. Repeat().

54. Grid Implícito y Explícito.

55. Grid Auto.Grid Dinámico.

56. Galería en Grid.

57. Grid Areas.

58. Nombrar Grid Lines.

59. Grid Shorthands.

60. Responsive Design.

61. Estructura Responsive Básica.

CSS Avanzado:

62. Transition.

63. Animaciones.

64. Cubic Bezier.

65. Transform.

66. Clip Path.

67. Background.

68. Variables.

69. Filtros.

70. Práctica con Filter.

71. Direction.

72. Letter Spacing.

73. Scroll Behavior.

74. User Selected.